<template>
  <div class="event-total">
    <div :class="`event-cate ${themeColor}`">
      <Tabs v-model:activeKey="activeKey">
        <TabPane key="1" tab="百度事件" />
        <TabPane key="2" tab="视频事件" />
        <TabPane key="3" tab="阻断事件" />
      </Tabs>
    </div>

    <div class="event-mode" v-if="activeKey === '2'">
      <VideoEvent :eventTypeNumber="[2]" @changeColor="changeColor" />
    </div>
    <div class="event-mode" v-if="activeKey === '3'">
      <BlockEvent :eventTypeNumber="[3]" @changeColor="changeColor" />
    </div>
    <div class="event-mode" v-if="activeKey === '1'">
      <BaiduEvent :eventTypeNumber="[1]" @changeColor="changeColor" />
    </div>

    <div class="audio-btn">
      <audio ref="audioPlayer" controls src=""></audio>
    </div>
  </div>
</template>

<script lang="ts">
  import { h, defineComponent, ref, onMounted, onUnmounted } from 'vue';
  import { Tabs, TabPane, Button, message, notification } from 'ant-design-vue';
  import BaiduEvent from './baiduEvent.vue';
  import VideoEvent from './videoEvent.vue';
  import BlockEvent from './blockEvent.vue';
  import { voicePlay } from '/@/api/operationalMonitoring/trafficAnalysis.ts';
  export default defineComponent({
    components: {
      BaiduEvent,
      VideoEvent,
      BlockEvent,
      // Button,
      Tabs,
      TabPane,
    },
    setup() {
      const activeKey = ref('1');
      const eventDom = ref(null);
      const themeColor = ref('black');

      const audioPlayer = ref(null);

      const voiceCount = ref({ dhcnt: 0, tfcnt: 0, bdcnt: 0 });

      const dataAgain = ref(null);
      let voiceAllow;

      //每5分钟请求一次事件数量
      const getVoice = async () => {
        await voicePlay().then(async (res) => {
          let dh = res.find((ele) => ele.event_type === 'dh')?.cnt || 0;
          let tf = res.find((ele) => ele.event_type === 'tf')?.cnt || 0;
          let bd = res.find((ele) => ele.event_type === 'bd')?.cnt || 0;

          const { dhcnt, tfcnt, bdcnt } = voiceCount.value;

          const voicePlay = (count, name, time) => {
            return new Promise((res, rej) => {
              voiceCount.value[name + 'cnt'] = count;
              if (voiceAllow === 'allow') {
                audioPlayer.value.src = `/resource/audio/${name}.wav`;
                audioPlayer.value.load();
                audioPlayer.value.play();
              }
              setTimeout(() => {
                res();
              }, time);
            });
          };

          if (dh !== dhcnt) {
            message.info('您有一条新的视频事件信息');
            await voicePlay(dh, 'dh', 3000);
          }

          if (tf !== tfcnt) {
            message.info('您有一条新的突发事件信息');
            await voicePlay(tf, 'tf', 3000);
          }

          if (bd !== bdcnt) {
            message.info('您有一条新的拥堵事件信息');
            await voicePlay(bd, 'bd', 2000);
          }

          console.log(voiceCount.value, 'ressssssss');
        });
      };

      const btnClick = async (type) => {
        clearInterval(dataAgain.value);
        await getVoice();

        dataAgain.value = setInterval(() => {
          getVoice();
        }, 60000);

        console.log('btnclick');
      };

      onUnmounted(() => {
        clearInterval(dataAgain.value);
      });
      onMounted(() => {
        notification.close('voiceAllow');
        notification.open({
          message: '是否开启语音通知？',
          duration: null,
          description: '开启语音通知后会有语音播放提示信息',
          btn: h('div', [
            h(
              Button,
              {
                type: 'primary',
                size: 'small',
                onClick: () => {
                  voiceAllow = 'allow';
                  btnClick();
                  notification.close('voiceAllow');
                },
              },
              () => '开启',
            ),
            h(
              Button,
              {
                type: 'primary',
                size: 'small',
                style: 'margin-left:15px',
                onClick: () => {
                  voiceAllow = 'close';
                  btnClick();
                  notification.close('voiceAllow');
                },
              },
              () => '关闭',
            ),
          ]),
          key: 'voiceAllow',
        });
      });

      const changeColor = (data) => {
        if (data === 'black') {
          themeColor.value = 'black';
        } else {
          themeColor.value = 'white';
        }
      };

      return {
        btnClick,
        audioPlayer,
        activeKey,
        themeColor,
        changeColor,
        eventDom,
      };
    },
  });
</script>

<!-- 左侧模态框主题 dugis主题-->
<style lang="less" scoped>
  .event-total {
    .audio-btn {
      position: fixed;
      z-index: -2;
      opacity: 0;
    }

    .black {
      box-shadow: 0 0 4px 2px rgba(35, 131, 134, 0.2);
      background: linear-gradient(to left, rgba(36, 59, 85, 0.8), rgba(20, 30, 48, 0.8));

      ::v-deep .ant-tabs {
        width: 100%;

        .ant-tabs-ink-bar {
          background-color: rgba(43, 211, 217, 0.7);
        }

        .ant-tabs-tab-active {
          color: rgba(43, 211, 217, 0.7) !important;
        }

        .ant-tabs-tab {
          color: #fff;
        }
      }
    }

    .white {
      background: white;

      ::v-deep .ant-tabs {
        width: 100%;

        .ant-tabs-ink-bar {
          background-color: #0066ff;
        }

        .ant-tabs-tab-active {
          color: #0066ff !important;
        }

        .ant-tabs-tab {
          color: black;
        }
      }
    }

    .event-cate {
      width: 460px;
      display: inline-flex;
      position: absolute;
      z-index: 999;
      padding: 0 16px;
      left: 8px;
      top: 5px;
      border-radius: 5px;
    }

    .event-mode {
      width: 100%;
      height: calc(100vh - 80px);
    }
  }
</style>
